<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="线索管理" name="first">
            <!--收起选项卡-->
            <el-container>
                <el-header style="height: 60px;margin-align:left;">
                    <!--最大div-->
                    <div style="margin-top: -10px">
                        <!--新建栏-->
                        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px;">
                            <el-row :gutter="24">
                                <el-col :span="3">
                                    <span style="font-size: 19px;line-height:40px;margin-left: 5px">线索管理</span>
                                </el-col>
                                <el-col :span="6">
                                    <span>场景：</span>
                                    <el-select v-model="value7" @change="changebusni" style="width: 150px;" placeholder="请选择">
                                        <el-option v-for="item in options" :key="item.xz"
                                                   :label="item.label" :value="item.xz">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input clearable search placeholder="请输入线索名称/手机/电话" v-model="input3" @keyup.enter.native="initData" style="width: 250px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" @click="initData"></i>
                                    </el-input>
                                </el-col>
                                <el-col :span="7" style="margin-top: 4px;">
                                    <el-button size="medium" @click="gotoMenu" type="primary" style="margin-left: 0px;">新建线索</el-button>
                                    <el-button size="medium" @click="exportExcels" icon="el-icon-folder-remove">导出</el-button>
                                    <el-button size="medium" icon="el-icon-folder-add" class="div1">导入</el-button>
                                    <i @click="showtablecol" style="margin-top: 0px;margin-left: 12px;font-size: 22px;" class="el-icon-s-grid"/>
                                </el-col>
                                <!--动态选择表格列-->
                                <el-dialog width="800px"  :before-close="handleDialogClose" center :close-on-click-modal=false
                                           style="text-align: left" title="选择表格列" :visible.sync="jilutankuan">
                                    <div style="height:230px;margin-left: 25px;margin-top: 20px" >
                                        <el-row>
                                            <el-col :span="2">
                                                <span>选择：</span>
                                            </el-col>
                                            <el-col :span="22">
                                                <el-checkbox-group v-model="colOptions">
                                                    <el-checkbox v-for="item in colSelect"
                                                                 :label="item"
                                                                 v-bind:disabled="item=='线索名称'"
                                                                 :key="item">
                                                        <span>{{item}}</span>
                                                    </el-checkbox>
                                                </el-checkbox-group>
                                            </el-col>
                                        </el-row>
                                        <el-row style="margin-top: 60px">
                                            <el-col :span="2">
                                                <span>注意：</span>
                                            </el-col>
                                            <el-col :span="11">
                                                <span>选择列最多不超过八列，最少不低于五列</span>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col style="margin-left: 540px;margin-top: 50px">
                                                <span>已选择：</span>
                                                <span>{{colcount}}</span>
                                                <span>列</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div style="width: 170px;margin-top: 5px;margin-left: 560px;">
                                        <el-button type="primary" @click="savetablecol">保存</el-button>
                                        <el-button @click="distablecol" class="el-icon-back">返回</el-button>
                                    </div>
                                </el-dialog>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main>
                        <div style="border: 1px solid #BFBFBF;background-color: white">
                            <div style="width: 100%;height: 40px;background-color: white;border-bottom: 1px solid #EBEEF5">
                                <div class="operate" v-show="cjy">
                                    <div class="selected—title" style="border-right: 1px; width: 200px; ">
                                        场景：<span>{{value7}}</span>
                                    </div>
                                </div>
                                <div class="operate" v-show="cje">
                                    <div class="selected—title">
                                        已选中<span class="selected—count">{{count}}</span>项
                                    </div>
                                    <div  class="selected—title2" >
                                        <span><i class="el-icon-upload2"></i>导出选中</span>
                                    </div>
                                    <div class="selected—title1" v-show="isOne">
                                        <span><i class="el-icon-edit"></i>修改</span>
                                    </div>
                                    <div @click="truedetbus" class="selected—title1">
                                        <span><i class="el-icon-delete"></i>删除</span>
                                    </div>
                                </div>
                            </div>
                                <el-table id="tableids" :data="clueList" ref="clueList" style="width: 100%"
                                        @selection-change="handleSelectionChange" height="410px">
                                    <el-table-column type="selection" prop="clueId" align="center"></el-table-column>
                                    <el-table-column v-if="colData[0].istrue" prop="clueId" label="ID" sortable align="center">
                                    </el-table-column>
                                    <el-table-column v-if="colData[1].istrue" label="线索名称">
                                        <template slot-scope="sp">
                                            <a v-html="sp.row.clueName" class="businame" @click="todetails(sp.row)"></a>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="colData[2].istrue" prop="clueSource" label="线索来源">
                                    </el-table-column>
                                    <el-table-column v-if="colData[3].istrue" prop="clueLinkmanname" label="联系人">
                                    </el-table-column>
                                    <el-table-column v-if="colData[4].istrue" prop="clueLinkmansj" label="手机">
                                    </el-table-column>
                                    <el-table-column v-if="colData[5].istrue" prop="cluePhone" label="电话">
                                    </el-table-column>
                                    <el-table-column v-if="colData[6].istrue" sortable prop="clueEstablishtime" label="下次联系时间" width="150">
                                        <template slot-scope="p">
                                            {{p.row.clueEstablishtime | formatDate}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="colData[7].istrue" prop="empId.empName" label="负责人">
                                    </el-table-column>
                                    <el-table-column v-if="colData[8].istrue" prop="empId.empName" label="创建人">
                                    </el-table-column>
                                    <el-table-column v-if="colData[9].istrue" prop="clueSite" label="地址" width="280">
                                        <template slot-scope="sco">
                                            <el-tooltip placement="top">
                                                <div slot="content">{{ sco.row.clueSite}}</div>
                                                <span>{{sco.row.clueSite}}</span>
                                            </el-tooltip>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="colData[10].istrue" prop="clueSitexq" label="详情地址">
                                    </el-table-column>
                                    <el-table-column v-if="colData[11].istrue" prop="clueRemark" label="备注">
                                    </el-table-column>
                                    <el-table-column v-if="colData[12].istrue" sortable prop="clueNowtime" label="创建时间" width="150">
                                        <template slot-scope="p">
                                            {{p.row.clueNowtime | formatDate}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="d">
                                            <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                            <i style="font-size:18px;color: #409EFF" class="el-icon-edit" @click="xiugai(d.row)"></i>
                                            <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete" @click="scclient(d.row)"></i>
                                        </template>
                                    </el-table-column>
                                </el-table>
                        </div>
                        <!--分页框-->
                        <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                            <div style="text-align: center">
                                <el-pagination @size-change="handleSizeChange" @current-change="changePage" :current-page.sync="currPage" :page-sizes="sizes"
                                               :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize" >
                                </el-pagination>
                            </div>
                        </div>
                </el-main>
            </el-container>
        </el-tab-pane>
        <el-tab-pane label="已失效线索" name="second">
            <!--收起选项卡-->
            <el-container>
                <el-header style="height: 60px;margin-align:left;">
                    <!--最大div-->
                    <div style="margin-top: -10px">
                        <!--新建栏-->
                        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px;">
                            <el-row :gutter="24">
                                <el-col :span="3">
                                    <span style="font-size: 19px;line-height:40px;margin-left: 5px">已失效线索</span>
                                </el-col>
                                <el-col :span="6">
                                    <span>场景：</span>
                                    <el-select v-model="value7zt" @change="changebusnizt" style="width: 150px;" placeholder="请选择">
                                        <el-option v-for="item in optionszt" :key="item.xzzt"
                                                   :label="item.labelzt" :value="item.xzzt">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input clearable search placeholder="请输入线索名称/手机/电话" v-model="input3zt" @keyup.enter.native="initDatazt" style="width: 250px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" @click="initDatazt"></i>
                                    </el-input>
                                </el-col>
                                <el-col :span="7">
                                    <el-button size="medium" @click="gotoMenuzt" type="primary" style="margin-left: 20px;">新建线索</el-button>
                                    <el-button size="medium" @click="exportExcels" icon="el-icon-folder-remove">导出</el-button>
                                    <el-button size="medium" icon="el-icon-folder-add" class="div1">导入</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <div style="border: 1px solid #BFBFBF;background-color: white">
                        <div style="width: 100%;height: 40px;background-color: white;border-bottom: 1px solid #EBEEF5">
                            <div class="operate" v-show="cjyzt">
                                <div class="selected—title" style="border-right: 1px; width: 200px; ">
                                    场景：<span>{{value7zt}}</span>
                                </div>
                            </div>
                            <div class="operate" v-show="cjezt">
                                <div class="selected—title">
                                    已选中<span class="selected—count">{{countzt}}</span>项
                                </div>
                                <div  class="selected—title2" >
                                    <span><i class="el-icon-upload2"></i>导出选中</span>
                                </div>
                                <div class="selected—title1" v-show="isOnezt">
                                    <span><i class="el-icon-edit"></i>修改</span>
                                </div>
                                <div @click="scclues" class="selected—title1">
                                    <span><i class="el-icon-delete"></i>删除</span>
                                </div>
                                <div @click="plclue" class="selected—title1">
                                    <span><i class="el-icon-refresh"></i>恢复</span>
                                </div>
                            </div>
                        </div>
                        <el-table id="tableid" :data="clueztList" height="410px"
                                  @selection-change="handleSelectionChangezt">
                            <el-table-column type="selection" width="50" align="center">
                            </el-table-column>
                            <el-table-column fixed prop="clueId" label="ID" sortable align="center" width="60">
                            </el-table-column>
                            <el-table-column label="线索名称" width="100">
                                <template slot-scope="sp">
                                    <a v-html="sp.row.clueName" class="businame" @click="todetails(sp.row)"></a>
                                </template>
                            </el-table-column>
                            <el-table-column prop="clueSource" label="线索来源" width="90">
                            </el-table-column>
                            <el-table-column prop="clueLinkmanname" label="联系人" width="80">
                            </el-table-column>
                            <el-table-column prop="clueLinkmansj" label="手机" width="120">
                            </el-table-column>
                            <el-table-column sortable prop="clueEstablishtime" label="下次联系时间" width="170">
                                <template slot-scope="p">
                                    {{p.row.clueEstablishtime | formatDate}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="empId.empName" label="负责人" width="80">
                            </el-table-column>
                            <el-table-column prop="clueSite" label="地址" width="270">
                            </el-table-column>
                            <el-table-column prop="clueRemark" label="备注" width="110">
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="100">
                                <template slot-scope="d">
                                    <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                    <i style="font-size:18px;color: #409EFF" class="el-icon-refresh"
                                        @click="dhclue(d.row)"></i>
                                    <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"
                                        @click="scclue(d.row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--分页框-->
                    <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                        <div style="text-align: center">
                            <el-pagination @size-change="handleSizeChangezt" @current-change="changePage1" :current-page.sync="currPagezt" :page-sizes="sizeszt"
                                           :page-size="pageSizezt" layout="total, sizes, prev, pager, next, jumper" :total="totalSizezt" >
                            </el-pagination>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js';
    import Crypto  from '../router//secret.js'
    import XLSX from "xlsx";
    import FileSaver from "file-saver";
    export default {
        name: "TfyCluePage",
        data() {
            return {
                colsize:7,//记录前一次表格列是多少个
                colarr:[],//记录前一次的表格列是哪些
                activeName: 'first',//标签页
                clueList: [],//线索
                clueztList: [],//失效线索
                multipleTable: [],//存放选中值的数组
                multipleTablezt: [],//存放选中值的数组2
                isOne: true,//选中项为1就出现添加跟进记录和修改
                isOnezt: true,//选中项为1就出现添加跟进记录和修改
                jilutankuan: false,
                /*表格列数据*/
                colSelect: [
                    "ID","线索名称","线索来源","联系人","手机","电话", "下次联系时间","负责人","创建人",
                    "地址","地址详情","备注", "创建时间"
                ],//选项
                colOptions: [
                    "ID","线索名称","联系人","手机", "负责人","下次联系时间","地址"
                ], //默认选择

                /*动态显示表格列*/
                colData:[
                    {title: "ID",istrue: true},
                    {title: "线索名称",istrue: true},
                    {title: "线索来源",istrue: false},
                    {title: "联系人",istrue: true},
                    {title: "手机",istrue: true},
                    {title: "电话",istrue: false},
                    {title: "下次联系时间",istrue: true},
                    {title: "负责人",istrue: true},
                    {title: "创建人",istrue: false},
                    {title: "地址",istrue: true},
                    {title: "地址详情",istrue: false},
                    {title: "备注",istrue: false},
                    {title: "创建时间",istrue: false},
                ],
                /*列表表头信息*/
                tableInfo:[
                    {name:'ID', value:'clueId',},
                    {name:'线索名称', value:'clueName',},
                    {name:'线索来源', value:'clueSource'},
                    {name:'联系人', value:'clueLinkmanname'},
                    {name:'手机', value:'clueLinkmansj',},
                    {name:'电话', value:'cluePhone'},
                    {name:'下次联系时间', value:'clueEstablishtime',},
                    {name:'负责人', value:'empName',},
                    {name:'创建人', value:'empName',},
                    {name:'地址', value:'clueSite',},
                    {name:'地址详情', value:'clueSitexq',},
                    {name:'备注', value:'clueRemark',},
                    {name:'创建时间', value:'clueNowtime',},
                ],
                value7: '',
                //场景一
                cjy: true,
                //场景二
                cje: false,
                options: [{
                    xz: '我负责的线索',
                    label: '我负责的线索'
                }, {
                    xz: '属下负责的线索',
                    label: '属下负责的线索'
                }, {
                    xz: '已转化的线索',
                    label: '已转化的线索'
                }, {
                    xz: '全部线索',
                    label: '全部线索'
                }],
                xz: '',
                input3: '',
                input3zt: '',
                select: '',
                //页数
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                sizes:[5, 10, 15, 20],

                value7zt: '',
                //场景一
                cjyzt: true,
                //场景二
                cjezt: false,
                optionszt: [{
                    xzzt: '我负责的线索',
                    labelzt: '我负责的线索'
                }, {
                    xzzt: '属下负责的线索',
                    labelzt: '属下负责的线索'
                }, {
                    xzzt: '已转化的线索',
                    labelzt: '已转化的线索'
                }, {
                    xzzt: '全部线索',
                    labelzt: '全部线索'
                }],
                xzzt: '',
                //页数2
                pageSizezt:5,//分页页大小
                currPagezt:1,//当前页码，默认为1
                totalSizezt:0,//总记录数
                sizeszt:[5, 10, 15, 20],
                //表格滚动条高度:max-height="tableHeight"
                tableHeight2: 1120,
                //快捷日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            }
        },
        methods: {
            /**点击 自定义表格列 关闭对话框的回调**/
            handleDialogClose() {
                this.distablecol();
            },
            /*编辑显示表格列*/
            showtablecol(){
                this.jilutankuan=true;
                this.colsize = this.colOptions.length;
                this.colarr = this.colOptions;
            },
            /*选择列返回放法*/
            distablecol(){
                if(this.colsize!=this.colOptions.length){
                    this.$confirm('此操作将未保存, 是否返回?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var a = this.colOptions.length-this.colsize;
                        window.console.log(a);
                        if(a>0){
                            for(var i=this.colOptions.length-1;i>=this.colsize;i--) {
                                this.colOptions.splice(i, 1);
                            }
                        }else{
                            this.colOptions = this.colarr;
                        }

                        this.jilutankuan=false;
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }else{
                    this.jilutankuan=false;
                }
            },
            /*表格与选择列呼应方法*/
            arrcol(valArr){
                var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
                this.colData.filter(i => {
                    if (arr.indexOf(i.title) != -1) {
                        i.istrue = false;
                    } else {
                        i.istrue = true;
                    }
                });
            },
            /*选择列保存方法*/
            savetablecol(){
                window.console.log(this.colOptions.length);
                if(this.colOptions.length>8){
                    this.$message({
                        showClose: true,
                        message: '选择列超过八条！',
                        type: 'warning'
                    });
                }else if(this.colOptions.length<5){
                    this.$message({
                        showClose: true,
                        message: '选择列低于五条！',
                        type: 'warning'
                    });
                }else {
                    this.jilutankuan=false;
                    this.arrcol(this.colOptions);
                }
            },
            exportExcel () {
                var fix = document.querySelector('.el-table__fixed');
                var wb;
                if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#tableid').removeChild(fix));
                    document.querySelector('#tableid').appendChild(fix);
                }else{
                    wb = XLSX.utils.table_to_book(document.querySelector("#tableid"));
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
                        "线索导出.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            exportExcels () {
                var fix = document.querySelector('.el-table__fixed');
                var wb;
                if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#tableids').removeChild(fix));
                    document.querySelector('#tableids').appendChild(fix);
                }else{
                    wb = XLSX.utils.table_to_book(document.querySelector("#tableids"));
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
                        "线索导出.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            //修改方法
            xiugai(id){
                window.console.log(id)
                this.$router.push({
                    path:'/xjxs',
                    query: {key:id}
                });
            },
            initData(){//线索查询
                window.console.log(this.input3);
                this.$axios.post("http://localhost:8088/clue-list",this.qs.stringify(
                    {search:this.input3, page:this.currPage, size:this.pageSize}))
                    .then(v=>{
                        this.clueList = v.data.rows;
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            changePage(v){
                this.currPage = v;
                this.initData();
            },
            initDatazt(){//失效线索查询
                window.console.log(this.input3zt);
                this.$axios.post("http://localhost:8088/cluezt-list",this.qs.stringify(
                    {search:this.input3zt, page:this.currPagezt, size:this.pageSizezt}))
                    .then(v=>{
                        this.clueztList = v.data.rows;
                        this.totalSizezt = v.data.total;
                    })
                    .catch()
            },
            changePage1(v){
                this.currPagezt = v;
                this.initDatazt();
            },
            /*批量逻辑删除线索方法*/
            truedetbus(){
                var list = JSON.stringify({cluelist:this.multipleTable});
                this.print("cluelist:"+list);
                this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/deleteclue-list",this.qs.stringify({
                        cluedx:list
                    })).then(() => {
                        this.print("数据："+this.multipleTable);
                        this.clueList.forEach((xs)=>{
                            this.print(xs);
                            this.initData();
                            this.initDatazt();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '删除成功!',
                        });
                    }).catch(v=> {
                        alert("加载失败删除："+v.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //线索单行逻辑删除方法
            scclient(row){
                this.multipleTable[0] =row;
                this.truedetbus();
            },
            /*批量恢复线索修改*/
            plclue(){
                var list = JSON.stringify({cluelist:this.multipleTablezt});
                this.print("cluelist:"+list);
                this.$confirm('此操作将恢复该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/hfclue-list",this.qs.stringify({
                        cluedx:list
                    })).then(() => {
                        this.print("数据："+this.multipleTablezt);
                        this.clueztList.forEach((xs)=>{
                            this.print(xs);
                            this.initDatazt();
                            this.initData();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '恢复成功!',
                        });
                    }).catch(v=> {
                        alert("加载失败恢复："+v.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消恢复'
                    });
                });
            },
            //单行恢复线索修改
            dhclue(row){
                this.multipleTablezt[0] =row;
                this.plclue();
            },
            /*批量物理删除线索方法*/
            scclues(){
                var list = JSON.stringify({cluelist:this.multipleTablezt});
                this.print("cluelist:"+list);
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/scclue-list",this.qs.stringify({
                        cluedx:list
                    })).then(() => {
                        this.print("数据："+this.multipleTablezt);
                        this.clueztList.forEach((xs)=>{
                            this.print(xs);
                            this.initDatazt();
                            this.initData();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '删除成功!',
                        });
                    }).catch(v=> {
                        alert("加载失败删除："+v.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //线索单行物理删除方法
            scclue(row){
                this.multipleTablezt[0] =row;
                this.scclues();
            },
            /*跳转详情方法*/
            todetails(rows){
                rows = escape(Crypto.set(rows.clueId)); // 加密数据
                this.$router.push({
                    path:'/tfyxsxq',
                    query: {
                        row:rows
                    }
                })
            },
            //复选框选中的
            handleSelectionChange(val) {
                this.multipleTable = val;//  this.multipleTable 选中的值
                if (this.multipleTable.length > 0) {
                    this.cjy = false;//第一行隐藏
                    this.cje = true;//批量操作栏出现
                }
                //选中项大于1不能执行添加跟进记录和修改按钮
                if (this.multipleTable.length > 1) {
                    this.isOne = false;
                } else if (this.multipleTable.length == 0) {//选中项为0时
                    this.cjy = true;//第一行出现
                    this.cje = false;//批量操作栏隐藏
                } else {
                    this.isOne = true;//添加跟进记录和修改出现
                }
                window.console.log(val);
            },
            //复选框选中的
            handleSelectionChangezt(val) {
                this.multipleTablezt = val;//  this.multipleTable 选中的值
                if (this.multipleTablezt.length > 0) {
                    this.cjyzt = false;//第一行隐藏
                    this.cjezt = true;//批量操作栏出现
                }
                //选中项大于1不能执行添加跟进记录和修改按钮
                if (this.multipleTablezt.length > 1) {
                    this.isOnezt = false;
                } else if (this.multipleTablezt.length == 0) {//选中项为0时
                    this.cjyzt = true;//第一行出现
                    this.cjezt = false;//批量操作栏隐藏
                } else {
                    this.isOnezt = true;//添加跟进记录和修改出现
                }
                window.console.log(val);
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            gotoMenu() {
                this.$router.replace('/xjxs')
            },
            gotoMenuzt() {
                this.$router.replace('/xjxs')
            },
            /*选择类型线索方法*/
            changebusni() {
                if (this.value7 != '') {
                    this.seek = true;
                }
            },
            /*选择类型失效线索方法*/
            changebusnizt() {
                if (this.value7zt != '') {
                    this.seek = true;
                }
            },
            handleSizeChange(val){
                window.console.log('每页${val}条')
                this.initData(1,this.pageSize=val,this.clueList)
            },
            handleSizeChangezt(val){
                window.console.log('每页${val}条')
                this.initDatazt(1,this.pageSizezt=val,this.clueztList)
            },
            handleClick(tab, event) {//标签页
                console.log(tab, event);
            }
        },
        computed: {
            count() {
                return this.multipleTable.length
            },
            countzt() {
                return this.multipleTablezt.length
            },
            colcount(){
                return this.colOptions.length;
            }
        },
        created: function () {
            this.pageSize = this.sizes[0];
            this.initData(this.currPage, this.pageSize);
            this.pageSizezt = this.sizeszt[0];
            this.initDatazt(this.currPagezt, this.pageSizezt);

        },
        filters:{
            formatDate: function(time) {
                if(time != null && time != ""){
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                }else{
                    return "";
                }
            }
        }
    }
</script>

<style scoped>
    .div1{
        transform:translateY(-50%);/**上移元素**/
        -ms-transform:translateY(-50%);
        -webkit-transform:translateY(-1%);
    }
    .operate{
        font-size: 12px;
        height: 40px;
        padding: 0 20px;
        color: #777;
        background: white;
    }
    .selected—title{
        margin-top: 15px;
        margin-left: -6px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
    }
    .selected—title1{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
        cursor: pointer;
    }
    .selected—title1 span{
        margin-left: 24px;
    }
    .selected—title1 span:hover{
        color:#409eff;
    }
    .selected—title2{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 129px;
        height:20px;
        float: left;
        cursor: pointer;
    }
    .selected—title2 span{
        margin-left: 24px;
    }
    .selected—title2 span:hover{
        color:#409eff;
    }
    .businame{
        color: #409EFF;
        cursor:pointer;
    }
</style>